<template>
	<view class="wrap">
		<view class="list" v-if="isLogin">
			<view class="item" v-for="(item,index) in cartList" :key="index">
				<u-row gutter="16">
					<u-col :span="1">
						<u-checkbox-group>
							<u-checkbox v-if="item.checked" @change="changeCheckBox(index)" v-model="item.checked" shape="circle" checked></u-checkbox>
							<u-checkbox v-else="item.checked" @change="changeCheckBox(index)" v-model="item.checked" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</u-col>
					<u-col :span="3">
						<u-image width="100%" height="150rpx" :src="item.thumb"></u-image>
					</u-col>
					<u-col :span="8" @click="toGoods(item.goods._id)">
						<view class="gl-name">{{item.title}}</view>
						<view class="gl-descript">{{item.goods.descript}}</view>
						<view class="gl-price">
							<u-row>
								<u-col :span="6">
									￥{{formatPrice(item.goods.price)}}
								</u-col>
								<u-col :span="6" v-if="rightText=='编辑'">
									<u-number-box v-model="item.count" :min="1" :max="item.goods.stock" @change="countChange(item)"></u-number-box>
								</u-col>
							</u-row>
						</view>

					</u-col>
				</u-row>
			</view>
		</view>
		<view v-if="inited">
			<view class="no-data" v-if="isLogin && cartList.length === 0 ">
				<view class="content">
					<u-icon name="shopping-cart" size="80" color="#ccc" style="justify-content: center;"/><br>
					购物车还是空的
				</view>
				<u-button shape="circle" @click="toHome">去逛逛</u-button>
			</view>
			<view class="no-data" v-if="!isLogin">
				<view class="content">
					<u-icon name="shopping-cart" size="80"  color="#ccc" style="justify-content: center;"/><br>
					还没有登录
				</view>
				<u-button type="primary" shape="circle" @click="toLogin">立即登录</u-button>
			</view>
		</view>

		<view class="navigation" v-if="isLogin &&cartList.length>0">
			<view class="left">
				<view class="item">
					<u-checkbox-group>
						<u-checkbox v-if="checkAll" @change="checkAll" v-model="checkedAll" shape="circle" checked>全选</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="item total-price" v-if="rightText=='编辑'">
					合计: ￥{{formatPrice(totalPrice)}}
				</view>


			</view>
			<view class="right">
				<u-button type="warning" v-if="rightText =='完成'" @click="addFav" style="margin-right:2rpx;">移入收藏</u-button>
				<u-button type="error" @click="submit">{{rightText=='编辑'?'结算':'删除'}}</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	const dbCmd = db.command
	const dbCart = db.collection("t_shop_cart")
	const dbGoods = db.collection("t_shop_goods")
	
	export default {
		data() {
			return {
				inited: false,
				isLogin: false,
				activeFooter: 2,
				checkedCartItem: [], //当前选中的购物车项目id
				allCartItem: [], // 用户所有的购物车项目id列表
				cartList: [],
				checkedAll: true,
				showEdit: false,
				rightText: '编辑'
			}
		},
		computed: {
			totalPrice() {
				return this.cartList.reduce((total, item) => total + (item.checked == true ? (parseFloat(item.goods.price) * item.count) :
					0), 0)
			}
		},
		onLoad() {
			this.init();
			this.rightText = '编辑';
		},
		methods: {
			init() {
				this.cartList = new Array()
				dbCart.where({id_user: dbCmd.eq(db.getCloudEnv("$cloudEnv_uid"))}).get().then(res => {
					let carts = res.result.data
					for (let i = 0; i < carts.length; i++) {
						dbGoods.where({_id: dbCmd.eq(carts[i].id_goods)}).get().then(res => {
							let goods = res.result.data[0]
							carts[i].title = goods.name
							carts[i].goods = goods
							carts[i].checked = true
							carts[i].thumb = 'https://zhy-demo.oss-cn-hangzhou.aliyuncs.com/upload/' + carts[i].goods.pic
							this.cartList.push(carts[i])
							this.checkedCartItem.push(carts[i]._id)
						})
					}
					this.isLogin = true
				}).catch(res => {
					console.log("no login")
				})
			},
			toHome() {
				this.$u.route({
					type: 'switchTab',
					url: '/pages/shop/index'
				});

			},
			back() {
				this.$u.route({
					type: 'navigateBack',
					delta: 1
				})
			},
			onClickRight() {
				this.showEdit = !this.showEdit
				this.rightText = this.rightText === '编辑' ? '完成' : '编辑'
			},
			toLogin() {
				this.$u.route('/pages/login/login');
			},
			formatPrice(price) {
				return (price / 100).toFixed(2);
			},
			toGoods(id) {
				console.log(id)
				this.$u.route({
					url: '/pages/list/detail',
					params: {
						id: id
					}
				})
			},
			changeCheckBox(index) {
				let cart = this.cartList[index]
				cart.checked = !cart.checked 
				this.cartList.splice(index, 1, cart)
			},
			countChange(item) {
				console.log(item.count)
				dbCart.where({
					id_goods: dbCmd.eq(item.id_goods), 
					id_user: dbCmd.eq(db.getCloudEnv("$cloudEnv_uid"))})
				.update({
					count: item.count
				})
			},
			checkAll() {
				if (this.checkedAll) {
					for (var i in this.cartList) {
						this.cartList[i].checked = false;
					}
				} else {
					for (var i in this.cartList) {
						this.cartList[i].checked = true;
					}
				}
				this.checkedAll = !this.checkedAll;
			},

			addFav() {
				let idArr = new Array();
				let idGoods = new Array();
				for (const i in this.cartList) {
					if (this.cartList[i].checked) {
						idGoods.push(this.cartList[i].goods.id);
						idArr.push(this.cartList[i].id);
					}
				}
				if (idArr.length == 0) {
					this.$u.toast('请选择收藏的商品');
					return;
				}
				let count = 0;
				for (var index in idGoods) {

					this.$u.post('user/favorite/add/' + idGoods[index]).then(res => {
						count++;
						if (count == idGoods.length) {
							this.$u.delete('user/cart', idArr).then(res2 => {
								this.$u.toast('收藏成功');
								this.init();
							});
						}
					});
				}

			},
			submit() {
				let idArr = new Array();
				for (const i in this.cartList) {
					if (this.cartList[i].checked) {
						idArr.push(this.cartList[i]._id);
					}
				}
				if (idArr.length == 0) {
					this.$u.toast('请选择要处理的商品');
					return;
				}
				this.$u.route({
					url: '/pages/order/checkout',
					params: {
						ids: idArr.join(','),
					}
				})
				// if (this.rightText == '编辑') {
				// 	//结算
				// 	console.log('结算', idArr);
				// 	this.$u.route({
				// 		url: '/pages/order/checkout',
				// 		params: {
				// 			ids: idArr.join(',')
				// 		}
				// 	})

				// }
				// if (this.rightText == '完成') {
				// 	//将商品移出购物车
				// 	this.$u.delete('user/cart', idArr).then(res => {
				// 		this.$u.toast('成功移出商品');
				// 		this.init();
				// 	});
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 0rpx 30rpx;

		.navbar-right {
			margin-right: 24rpx;
			display: flex;
		}

		.list {
			.item {
				margin-top: 20rpx;

				.gl-name {
					font-size: 26rpx;
				}

				.gl-descript {
					margin-top: 14rpx;
					font-size: 20rpx;
				}

				.gl-price {
					margin-top: 26rpx;
					font-size: 24rpx;
					color: #FA3534;
				}
			}
		}

		.no-data {
			padding: 0rpx 30rpx;
			margin-top: 50%;

			.content {
				text-align: center;
				color: lightgray;
				margin-bottom: 30rpx;
			}
		}

		.navigation {
			width: 100%;
			display: flex;
			position: fixed;
			bottom: 10;
			margin-top: 100rpx;
			border: solid 2rpx #f2f2f2;
			background-color: #ffffff;
			padding: 16rpx 0;
			justify-content: space-between;

			.left {
				display: flex;
				font-size: 20rpx;
				align-items: center;

				.item {
					margin: 0 8rpx;
				}

				.total-price {
					font-size: 30rpx;
					color: red;
				}
			}

			.right {
				display: flex;
				font-size: 28rpx;
				align-items: center;
				margin-right: 60rpx;

			}
		}
	}
</style>
